<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: coral;
        }
    </style>
    <script>
        window.onload=function()     //onload页面加载后的自动触发事件
        {
            var div=document.querySelector("div")
            console.log(div);
            div.style.backgroundColor='blue'
            alert("后执行onload事件")
        }                                                         
        window.addEventListener('DOMContentLoaded',function(){    //页面加载后的自动触发事件
            console.log('abcd');                                   //等onload先执行
            var img=document.querySelector("img")
            img.style.width='50px'
            var btn=document.querySelector("button")
            {
                btn.style.width='200px'
                alert("先执行DOMContentLoaded")
            }
        })
        window.onresize=function()  //浏览器窗口发生变化的时候触发的事件
        {
            var width=window.innerWidth;//获取window的宽度
            var height=window.innerHeight;
            document.querySelector('.main').innerHTML='width'+width+'height'+height
        }
       
       

    </script>
</head>
<body>

    <div class="main"></div>
    <img src="../images/threelogo.jpg" alt="">
    <button>这是按钮</button>
    <div></div>
    
</body>
</html>